<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<h1 class="mui-title">保险公司</h1>
		</header>
		<div class="mui-content">
			<div class="mui-slider" id="slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a href="#currency" class="mui-control-item mui-active">
						<span class="span_title">通用文件</span>
					</a>
					<a href="#product" class="mui-control-item">
						<span class="span_title">产品文件</span>
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="currency" class="mui-slider-items mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper list-wraper">
							<div class="mui-scroll list-wraper">
								<ul class="mui-table-view">
									<template v-for="(item,$index) in generaFile">
										<li class="mui-table-view-cell">{{item.title}}</li>
									</template>
									
								</ul>
							</div>
						</div>
					</div>
					<div id="product" class="mui-slider-items mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper list-wraper">
							<div class="mui-scroll list-wraper">
								<ul class="mui-table-view">
									<template v-for="(item,$index) in tableFile">
										<li class="mui-table-view-cell">{{item.title}}</li>
									</template>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				generaFile:{},
				tableFile:{},
			}
		},
		created:function(){
			mui('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
			});
			
			let id = this.$route.query.id;
			this.getFlistList(id);
		},
		methods:{
			getFlistList(id){
				mui.showLoading("正在加载..","div");//遮罩层
				let me = this;
				let generaFileApi = api.generaFileApi(id);
				let tableFileApi = api.tableFileApi(id);
				let query = '{'+generaFileApi+tableFileApi+'}';
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					mui.hideLoading();
					me.generaFile = res.data.data.listGeneralDownloads;
					me.tableFile = res.data.data.listTableDownloads;
					
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			}
		}
	}
	
</script>
<style scoped="scoped">
	#slider{
		background-color: #FFFFFF;
		height: 100%;
		position: relative;
	}
	.mui-control-content {
		background-color: white;
		min-height: 600px;
	}
	.mui-control-content .mui-loading {
		margin-top: 50px;
	}
	#slider .mui-active .span_title{
		color: #f08800;
		border-bottom: 2px solid #F08800;
		padding-bottom: 8px;
	}
	.height-100{
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	 .mui-table-view-cell{
		text-align: left;
	}
	 .mui-table-view-cell:after{
		left: 0;
	}
	.mui-slider-indicator.mui-segmented-control{
		border-bottom: 1px solid #ddd;
	}
	
</style>